@mixin keyframes($animationName) {
  @-webkit-keyframes #{$animationName} {
    @content;
  }
  @-moz-keyframes #{$animationName} {
    @content;
  }
  @-o-keyframes #{$animationName} {
    @content;
  }
  @keyframes #{$animationName} {
    @content;
  }
}



:root{
  --rotate{
    syntax: '<angle>';
    initial-value: 130deg;
    inherits: false;
  }
}
$rotate: 130deg;

.person{

  .textBox{
    display: inline-block;
    background: linear-gradient(90deg, red,green, blue, #0dc0bc);
    -webkit-background-clip: text;
    color: transparent;
    text-transform: capitalize;
  }
  .button{
    border: none;
    position: relative;
    border-radius: 10px;
    cursor: pointer;
    background: #182848;
    padding: 2em 4em;
    font-family: sans-serif;
    p{
      text-decoration: none;
      font-size: clamp(1.5rem, 2.5vw, 2.5rem);
      background: linear-gradient(-45deg, #ff00c1, #00fff9);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    &::after,
    &::before{
      content: '';
      position: absolute;
      background: linear-gradient(
                      var(--rotate),
                      #ff00c1 0%,
                      #9600ff 25%,
                      #4900ff 50%,
                      #00b8ff 80%,
                      #00fff9 100%
      );
      width: 105%;
      height: 110%;
      left: -2.5%;
      top: -5%;
      border-radius: 10px;
      z-index: -1;
      transition: $rotate 9999s linear;
    }
    &:hover::after,
    &:hover::before{
      --rotate: 3600deg;
      transition: --rotate 2s;
    }
    &:hover::before{
      animation: move-in-fade 1.2s infinite;
      @include  keyframes (move-in-fade){
        0%{
          opacity: 1;
          transform: scale(1);
          filter: blur(10px);
        }
        100%{
          opacity: 0;
          transform: scale(1.4);
          filter: blur(10px);
        }
      }

    }
  }





}

